<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片消失与出现-jQuery全能滚动插件：power-slider演示-前端博客</title>
	<link type="image/x-icon" href="http://caibaojian.com/favicon.ico" rel="icon">
  	<link type="image/x-icon" href="http://caibaojian.com/favicon.ico" rel="shortcut icon">
  	<link rel="stylesheet" href="reset.css"/>
    <meta name="keywords" content="前端博客,代码演示" />
  	<meta name="description" content="图片消失与出现-jQuery全能滚动插件：power-slider演示，前端博客代码演示，caibaojian.com，前端代码范例，演示代码" />
	<style type="text/css">
body{text-align: left;width:600px; margin:0 auto;}
.demolist{font-size: 0; *word-spacing: -1px;}
.demolist li{display: inline-block; font-size:14px; border:1px solid #eee; padding:10px; margin-right:10px; *display:inline; *zoom:1; word-spacing: normal; letter-spacing: normal; vertical-align: top;}
.active{background:#eee;}
.hidden{display: none;}
.code{padding:10px 0;}
.code h3 span{border:1px solid #ddd; margin-left:-1px; padding:10px;display:inline-block; cursor:pointer;}
pre{background:#eee; padding:10px;}
.menu{width:100%; background:#ECECEC; position:fixed; _position:absolute; top:0; left:0; z-index:3;}
.menu ul{width:600px; margin:0 auto;}
.menu ul li{float:left; margin-right:10px; padding:2px 6px;}
.menu ul li.active{background: #fff;}
.menu ul li a{line-height:32px; padding:0 4px;}
.content{width:490px; margin:0 auto;}

.slider{height:170px; margin:20px auto; overflow:hidden; position:relative;}
.sliderbox{position:relative;}/*必须加这句css,否则向左右，上下滚动时会没有效果*/
.slidernav{position:absolute; right:4px; bottom:5px; z-index:1;}
.slidernav li{float:left; width:24px;}
.slidernav li a{width:16px; padding:2px 4px; height:12px; background:#fff; color:#000; text-align:center;}
.slidernav li.current a{background:#3B8DD1; color:#fff;}
	</style>
</head>
<body>
	<div class="main">
		<div class="path">你的位置：<span xmlns:v="http://rdf.data-vocabulary.org/#">
        <span typeof="v:Breadcrumb"><a href="http://caibaojian.com" rel="v:url" property="v:title">前端博客</a></span>  &gt;
                <span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://caibaojian.com/t/jquery插件">jquery插件</a></span> &gt; <span typeof="v:Breadcrumb"><span class="breadcrumb_last" property="v:title"><a href="http://caibaojian.com/power-slider">jQuery插件：万能滚动power-slider</a></span></span>
        </span></div>
        <div class="menu">
	        <ul class="fix">
	        	<li>
					<div><a href="http://caibaojian.com" target="_blank">前端博客</a></div>
				</li>
				<li>
					<div><a href="http://caibaojian.com/power-slider" target="_blank">power-slider插件主页</a></div>
				</li>
	        	<li class="active">
					<div><a href="index.html">单张图片滚动</a></div>
				</li>
				<li>
					<div><a href="index6.html">多张图片滚动</a></div>
				</li>
				<li>
					<div><a href="index11.html">文字滚动</a></div>
				</li>
				<li>
					<div><a href="index13.html">内容滚动</a></div>
				</li>
	        </ul>
	    </div>
		<div class="content">
			<div class="slider" id="slider">
				<ul class="sliderbox">
					<li>
						<a href=""><img src="images/1.jpg" alt="全场包邮"></a>
					</li>
					<li>
						<a href=""><img src="images/2.jpg" alt="真人集体"></a>
					</li>
					<li>
						<a href=""><img src="images/3.jpg" alt="春游记录"></a>
					</li>
				</ul>
				<ul class="slidernav"></ul>
				<ul class="slidertext"><li><a href="">Lorem ipsum dolor sit1.</a></li><li><a href="">Lorem ipsum dolor sit2.</a></li><li><a href="">Lorem ipsum dolor sit3.</a></li></ul>
				<div class="prev"></div>
				<div class="next"></div>
			</div>
		</div>
	</div>
	<ul class="demolist">
		<li>
			<div><a href="index.html">图片上下滚动</a></div>
		</li>
		<li>
			<div><a href="index2.html">图片左右滚动</a></div>
		</li>
		<li class="active">
			<div><a href="index3.html">图片消失与出现</a></div>
		</li>
		<li>
			<div><a href="index4.html">图片渐隐渐现</a></div>
		</li>
		<li>
			<div><a href="index5.html">图片滑上滑下</a></div>
		</li>
	</ul>
	<div class="code">
		<h3><span class="active">HTML代码</span><span>CSS代码</span><span>JS代码</span></h3>
		<pre>&lt;div class=&quot;slider&quot; id=&quot;slider&quot;&gt;
&lt;ul class=&quot;sliderbox&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;images/1.jpg&quot; alt=&quot;全场包邮&quot;&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;images/2.jpg&quot; alt=&quot;真人集体&quot;&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;images/3.jpg&quot; alt=&quot;春游记录&quot;&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</pre>
		<pre class="hidden">.slider{height:170px; margin:20px auto; overflow:hidden; position:relative;}
.sliderbox{position:relative;}/*必须加这句css,否则向左右，上下滚动时会没有效果*/
		</pre>
		<pre class="hidden">$("#slider").powerSlider({handle:"hide",speed:0});
		</pre>
	</div>
    <h1><a href="http://caibaojian.com/power-slider">返回全能插件的详细介绍</a></h1>
    <script type="text/javascript" src="images/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="power-slider.js"></script>
    <script type="text/javascript">
    $(function(){  
        $("#slider").powerSlider({handle:"hide"});
        //$("#text").powerSlider();
        //$("#img").powerSlider({picNum:4,handle:"hide"});
        $(".code h3 span").each(function(i){
        	$(this).click(function(){
        		$(this).addClass("active").siblings().removeClass("active");
        		$(".code pre").eq(i).show().siblings("pre").hide();
        	})
        })
    });
</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=15910806" charset="UTF-8"></script>
</body>
</html>